<!--
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2024-07-04 11:28:41
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2024-08-23 08:29:23
 * @FilePath: /vue3-uniapp/src/components/ui/PageContainer/PageContainer.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup>
import type { TnNotifyInstance } from '@tuniao/tnui-vue3-uniapp';

import { useUserStore, useAppStore } from '@/store';

import { useWatermark } from './useWatermark';
import { useNotify } from './useNotify';

const { cssVarObject } = storeToRefs(useAppStore());
const { hasVaildToken } = storeToRefs(useUserStore());

const { show: watermarkShow, watermark } = useWatermark();

const notifyRef = ref<TnNotifyInstance | undefined>(undefined);
const { offsetHeight } = useNotify(notifyRef);
</script>

<template>
    <div class="page-container" :style="cssVarObject">
        <TnNotify ref="notifyRef" :z-index="1" :offset-top="offsetHeight" />
        <ZmmWatermark v-if="watermarkShow" :watermark="watermark" />
        <view v-if="hasVaildToken !== null">
            <slot></slot>
        </view>
        <view class="loading-box" v-else>
            <TnLoading
                show
                animation
                mode="flower"
                :color="cssVarObject['--c-primary']"
                :size="'xl'"
            />
            <view class="c-primary text-lg ml-[20rpx]">加载中...</view>
        </view>
    </div>
</template>

<style lang="scss" scoped>
.page-container {
    .loading-box {
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
}
</style>
